<template>
  <!-- 图片裁切组件 -->
  <div class="img-cut">
    <div class="img-wrap">
      <img :src="imgUrl" class="edit-img" alt="" />
    </div>
    <div class="btn-wrap">
      <el-upload
        ref="upload"
        :action="action"
        :auto-upload="false"
        :on-change="handleChange"
        :show-file-list="false"
        accept="image/*"
      >
        <button slot="trigger" class="btn btn-white">{{ btnText }}</button>
      </el-upload>
    </div>
    <el-dialog
      title="图片裁剪"
      :visible.sync="ImgDiaglogVisible"
      :modal="false"
      :close-on-click-modal="false"
      append-to-body
      :destroy-on-close="true"
      :center="true"
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="option.info"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            :mode="option.mode"
            :canScale="option.canScale"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer">
        <button class="btn btn-white" @click="ImgDiaglogVisible = false">
          取消
        </button>
        <button class="btn btn-red mleft-10" @click="getSliceImg">
          保存并关闭
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["imgUrl", "btnText"],
  data() {
    return {
      action: "/xxxx",
      ImgDiaglogVisible: false,
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        mode: "contain",
      },
    };
  },
  methods: {
    handleChange(file) {
      this.openImgDialog(file.raw);
    },
    getSliceImg() {
      this.$refs.cropper.getCropBlob(async (data) => {
        const imgSize = await this.getImgSize(data);
        this.$emit("upload", { file: data, imgSize , imgUrl : this.$refs.cropper.imgs });
        this.ImgDiaglogVisible = false;
      });
    },
    openImgDialog(file) {
      let reader = new FileReader();
      reader.onload = (theFile) => {
        this.option.img = theFile.target.result;
        this.ImgDiaglogVisible = true;
      };
      if (file) {
        reader.readAsDataURL(file);
      }
    },
    getImgSize(flie) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = function (thisFile) {
          let image = new Image();
          image.src = thisFile.target.result;
          image.onload = function () {
            resolve({
              width: this.width,
              height: this.height,
            });
          };
        };
        if (flie) {
          reader.readAsDataURL(flie);
        } else {
          reject("出错了");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.img-wrap {
  width: 140px;
  height: 140px;
  .edit-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
.btn-wrap {
  margin-top: 20px;
  width: 140px;
  text-align: center;
}
.cropper-content {
  .cropper {
    width: auto;
    height: 400px;
  }
}
</style>